<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'主页-写作突破-点亮单词/短语'"> </Breadcrumb>
        <RouterTabs :list="routerList" :current="1"> </RouterTabs>
        <view class="content">
          <view class="box">
            <view class="left">
              <CompositionList
                @select="handleCompositionSelect"
              ></CompositionList>
            </view>
            <view class="right">
              <view class="tabs" v-show="show">
                <view
                  class="tabs_item"
                  :class="{ active: type === '1' }"
                  @click="typeChange('1')"
                >
                  <text>亮点单词</text>
                </view>
                <view
                  class="tabs_item"
                  :class="{ active: type === '2' }"
                  @click="typeChange('2')"
                >
                  <text>亮点短语</text>
                </view>
              </view>
              <view class="title" v-show="!show">
                <template v-if="category === '1'">
                  <text @click="handleBack()">亮点单词</text>
                  <view class="title_icon">
                    <u-icon
                      name="arrow-right"
                      color="#a5a2a2"
                      size="32"
                    ></u-icon>
                  </view>
                  <text class="active">单词领读</text>
                </template>
                <template v-if="category === '3'">
                  <text @click="handleBack()">亮点单词</text>
                  <view class="title_icon">
                    <u-icon
                      name="arrow-right"
                      color="#a5a2a2"
                      size="32"
                    ></u-icon>
                  </view>
                  <text class="active">生词本</text>
                </template>
                <template v-if="category === '4'">
                  <text @click="handleBack()">亮点单词</text>
                  <view class="title_icon">
                    <u-icon
                      name="arrow-right"
                      color="#a5a2a2"
                      size="32"
                    ></u-icon>
                  </view>
                  <text class="active">备忘录</text>
                </template>
              </view>
              <view class="section" v-show="show">
                <view class="category" v-show="type === '1'">
                  <view
                    class="category_item"
                    @click="handleChangeCategory('1')"
                  >
                    <view class="category_text"> 单词领读 </view>
                  </view>
                  <view
                    class="category_item"
                    @click="handleChangeCategory('2')"
                  >
                    <view class="category_text"> 单词闯关 </view>
                  </view>
                  <view
                    class="category_item"
                    @click="handleChangeCategory('3')"
                  >
                    <view class="category_text"> 生词本 </view>
                  </view>
                  <view
                    class="category_item"
                    @click="handleChangeCategory('4')"
                  >
                    <view class="category_text"> 备忘录 </view>
                  </view>
                </view>
                <view class="table" v-show="type === '2'">
                  <view class="table" v-show="type === '2'">
                    <u-table
                      bg-color="rgba(39, 191, 241, 0.3)"
                      border-color="#ffffff"
                      font-size="36"
                      color="#ffffff"
                      padding="0 0"
                    >
                      <u-tr width="50%">
                        <u-th>词汇</u-th>
                        <u-th>中文释义</u-th>
                      </u-tr>
                      <u-tr
                        width="50%"
                        v-for="(item, index) in phraseList"
                        :key="index"
                      >
                        <u-td>
                          <view
                            style="
                              width: 100%;
                              display: flex;
                              justify-content: center;
                              align-items: center;
                            "
                            @click="playPhrase(item)"
                          >
                            <u-icon
                              name="volume-up"
                              color="#ffffff"
                              size="48"
                            ></u-icon>
                            <text
                              style="
                                width: auto;
                                font-size: 36rpx;
                                padding-left: 12rpx;
                                padding-right: 0;
                              "
                            >
                              {{ item.phraseEnglish }}
                            </text>
                          </view>
                        </u-td>
                        <u-td>{{ item.phraseChinese }}</u-td>
                      </u-tr>
                    </u-table>
                  </view>
                </view>
              </view>
              <view class="detail" v-show="!show">
                <template v-if="category === '1'">
                  <view class="word">
                    <view class="word_list" v-if="wordList.length > 0">
                      <view
                        :class="{ active: index === currentWordIndex }"
                        v-for="(item, index) in wordList"
                        :key="index"
                        @click="wordChange(index)"
                      >
                        {{ item.word }}
                      </view>
                    </view>
                    <view class="word_content">
                      <view class="word_info">
                        <view class="word_info_top" @click="playWord()">
                          <!-- <image
                            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/newimg/yl.png"
                            mode="widthFix"
                          ></image> -->
                          <text>{{ currentWordItem.word }}</text>
                        </view>
                        <view class="word_info_bottom">
                          {{ currentWordItem.wordSoundmark }}
                        </view>
                      </view>
                      <view class="word_text">
                        <view class="word_text_title"> 释义： </view>
                        <view class="word_text_content1">
                          {{ currentWordItem.wordParaphrase }}
                        </view>
                      </view>
                      <view class="word_text">
                        <view class="word_text_title"> 例句： </view>
                        <view
                          class="word_text_content2"
                          v-if="currentWordItem.sentence"
                        >
                          {{ currentWordItem.sentence.sentenceEnglish }}
                          <br />{{ currentWordItem.sentence.sentenceChinese }}
                        </view>
                      </view>
                      <view class="word_img">
                        <image
                          :src="currentWordItem.wordImage"
                          mode="widthFix"
                        ></image>
                      </view>
                      <view class="word_button">
                        <view class="word_button_content" @click="prev()">
                          <text>上一个</text>
                        </view>
                        <view class="word_button_content" @click="control()">
                          <text>{{ leadReadText }}</text>
                        </view>
                        <view class="word_button_content" @click="next()">
                          <text>下一个</text>
                        </view>
                      </view>
                    </view>
                    <view class="switch">
                      <text>+备忘 </text>
                      <view class="switch_content">
                        <u-switch
                          v-model="value"
                          size="36"
                          active-color="#78CCFF"
                          inactive-color="#DDDDDD"
                          @change="switchChange(value)"
                        ></u-switch>
                      </view>
                    </view>
                  </view>
                </template>
                <template v-if="category === '3'">
                  <view class="newword">
                    <NewWordbook
                      :list="newWordList"
                      @strengthen="strengthen"
                      @eliminate="eliminate"
                    ></NewWordbook>
                  </view>
                </template>
                <template v-if="category === '4'">
                  <view class="memo">
                    <Memo :list="memoWordList"></Memo>
                  </view>
                </template>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getStore } from "@/libs/storage";
import {
  getWordList,
  getPhraseList,
  wordMemoEdit,
  wordMemoCheck,
  getNewWordList,
  getMemoWordList,
} from "@/api/composition";
export default {
  components: {},
  computed: {
    currentWordItem() {
      return this.wordList[this.currentWordIndex] || {};
    },
  },
  data() {
    return {
      routerList: [
        {
          name: "攻略/模版",
          url: "pages/composition/compositionStrategy",
        },
        {
          name: "点亮单词/短语",
          url: "pages/composition/compositionPhrase",
        },
        {
          name: "亮点句型",
          url: "pages/composition/compositionSentence",
        },
        {
          name: "学习报告",
          url: "pages/composition/compositionReport",
        },
      ],
      period: getStore({
        name: "composition_period",
      }),
      type: "1",
      compositionItem: {},
      show: true,
      category: "",
      wordList: [],
      currentWordIndex: 0,
      leadReadText: "自动播放",
      playState: false,
      value: false,
      newWordList: [],
      memoWordList: [],
      phraseList: [],
      audio: null,
      isPlaying: false,
    };
  },
  onShow() {
    this.show = true;
  },
  onLoad() {},
  methods: {
    typeChange(type) {
      this.type = type;
      if (this.type === "2") {
        this.getPhrase();
      }
    },
    handleCompositionSelect(item) {
      this.compositionItem = item;
      this.show = true;
      this.type = "1";
      this.category = "";
    },
    handleChangeCategory(category) {
      this.show = false;
      this.category = category;
      if (category === "1") {
        this.getWord();
      } else if (category === "2") {
        uni.navigateTo({
          url: `/pages/composition/compositionPhrasePassDetail?id=${this.compositionItem.id}`,
        });
      } else if (category === "3") {
        this.getNewWord();
      } else if (category === "4") {
        this.getMemoWord();
      }
    },
    getWord() {
      let params = {
        typeId: this.compositionItem.id,
      };
      getWordList(params).then((res) => {
        this.wordList = res.data;
        this.checkMemo();
      });
    },
    wordChange(index) {
      this.currentWordIndex = index;
      this.checkMemo();
    },
    getPhrase() {
      let params = {
        typeId: this.compositionItem.id,
      };
      getPhraseList(params).then((res) => {
        this.phraseList = res.data;
      });
    },
    playWord() {
      if (this.isPlaying) return;
      this.audio = uni.createInnerAudioContext();
      this.audio.src = this.currentWordItem.wordAudio;
      this.audio.play();
      this.audio.onEnded(() => {
        this.isPlaying = false;
      });
      this.audio.onError(() => {
        this.isPlaying = false;
      });
      this.isPlaying = true;
    },
    prev() {
      if (this.currentWordIndex === 0) return;
      this.currentWordIndex--;
      this.playWord();
    },
    next() {
      if (this.currentWordIndex === this.wordList.length - 1) return;
      this.currentWordIndex++;
      this.playWord();
    },
    control() {
      if (!this.playState) {
        this.playState = true;
        this.leadReadText = "暂停播放";
        this.playAll();
      } else {
        this.suspend();
      }
    },
    playAll() {
      if (!this.playState) return;
      this.audio = uni.createInnerAudioContext();
      this.audio.src = this.currentWordItem.wordAudio;
      this.audio.play();
      this.audio.onEnded(() => {
        setTimeout(() => {
          this.currentWordIndex++;
          if (this.currentWordIndex > this.wordList.length - 1) {
            this.currentWordIndex = 0;
            this.suspend();
            return;
          }
          this.playAll();
        }, 2000);
      });
      this.audio.onError(() => {
        this.suspend();
      });
    },
    suspend() {
      this.playState = false;
      this.leadReadText = "自动播放";
    },
    switchChange() {
      let params = {
        addFlag: this.value,
        id: this.currentWordItem.id,
      };
      wordMemoEdit(params);
    },
    checkMemo() {
      let params = {
        wordId: this.currentWordItem.id,
      };
      wordMemoCheck(params).then((res) => {
        this.value = res.data;
      });
    },
    getNewWord() {
      let params = {
        typeId: this.compositionItem.id,
      };
      getNewWordList(params).then((res) => {
        this.newWordList = res.data;
      });
    },
    strengthen() {
      uni.navigateTo({
        url: `/pages/composition/compositionPhraseStrengthen?id=${this.compositionItem.id}`,
      });
    },
    eliminate() {
      uni.navigateTo({
        url: `/pages/composition/compositionPhraseEliminate?id=${this.compositionItem.id}`,
      });
    },
    getMemoWord() {
      let params = {
        typeId: this.compositionItem.id,
      };
      getMemoWordList(params).then((res) => {
        this.memoWordList = res.data;
      });
    },
    playPhrase(row) {
      if (this.isPlaying) return;
      this.audio = uni.createInnerAudioContext();
      this.audio.src = row.phraseAudio;
      this.audio.play();
      this.audio.onEnded(() => {
        this.isPlaying = false;
      });
      this.audio.onError(() => {
        this.isPlaying = false;
      });
      this.isPlaying = true;
    },
    handleBack() {
      this.show = true;
      this.category = "";
    },
  },
};
</script>
<style scoped lang="scss">
@import "./compositionPhrase";
</style>
